<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>睿云 让生意更美好！</title>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
	<link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}"/>
	<link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}"/>
	<link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}"/>
	<!-- 引入组件库 -->
	<script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
	<script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
	<script src="../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
</head>
<body>
	<div id="app" v-cloak>
		<div class="main-content">
			<!-- 页面头部 -->
			<div class="page-header">
				<h1 class="page-title">规格设置</h1>
				<div class="breadcrumb">首页<span>/</span>基础数据<span>/</span>规格设置</div>
			</div><!-- 页面头部 end -->

			<div class="spec_seeting">
				<div class="spec_items" v-for="(attr,idx1) in templateRelList">
					<h2>{{attr.attrName}}</h2>
					<div class='check_box'>
						<label class='check_custom' v-for="(detail,idx2) in attr.details">
							<input type="checkbox" checked v-if="detail.status" @click="pitch(idx1,idx2)">
							<input type="checkbox" v-else="detail.status">
							<span class='name'>{{detail.value}}</span>
						</label>
					</div>
				</div>
			</div>

			<!--<div class="edit-button-fixed">
				<div class="edit-button">
					<el-button type="primary" @click="handleSave">确定</el-button>
					<el-button @click="handleCancel">取消</el-button>
				</div>
			</div>-->

		</div>
	</div>

<script th:inline="javascript">
		new Vue({
			el: "#app",
			data: {
                templateRelList: [[${templateRelList}]],
			},
            methods: {
                pitch:function (idx1,idx2) {
                    let self = this;
					var uuid = self.templateRelList[idx1].details[idx2].uuid;
					var status = self.templateRelList[idx1].details[idx2].status;
                    var params = {"detailUuid":uuid, "status":!status};
                    $.ajax({
                        url: "/vendor/vendortemplaterel/changeStatus",
                        type: "POST",
                        data: params,
                        dataType: "json",
                        success: function (data) {
							if (data.returnCode === 1) {

							} else {
								self.$message({
									message: '设置失败',
									type: 'error',
									customClass: 'message-center',
									showClose: true,
									duration: 1500,
								});
							}
                        },
                        error: function () {
                            self.$message({
                                message: '系统异常，请联系管理员.',
                                type: 'error',
                                customClass: 'message-center',
                                duration: 1500,
                            });
                        }
                    });
                }
            }
		})
</script>
</body>
</html>